<template>
  <div class="nav-bar-container student">
    <el-row :gutter="15">
      <el-col
        :xs="4"
        :sm="12"
        :md="12"
        :lg="12"
        :xl="12"
      >
        <vab-logo />
      </el-col>
      <el-col
        :xs="20"
        :sm="12"
        :md="12"
        :lg="12"
        :xl="12"
      >
        <div class="right-panel">
          <div class="time">{{ time }}</div>
          <div class="date" style="margin: 0 10px">{{ date }}</div>
          <div class="week">{{ week }}</div>
          <vab-full-screen-bar @refresh="refreshRoute" />
          <i class="el-icon-refresh" style="cursor: pointer;font-size: 24px;margin-right: 10px" @click="refreshRoute" />
          <vab-avatar />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'VabNavBar',
  data() {
    return {
      pulse: false,
      drawer: false,
      direction: 'rtl',
      input3: '',
      date: null,
      time: null,
      week: null
    }
  },
  computed: {
    ...mapGetters({
      visitedRoutes: 'tabsBar/visitedRoutes',
      device: 'settings/device',
      baseColor: 'settings/baseColor',
      funcUnit: 'settings/funcUnit',
      routes: 'routes/routes'
    })
  },
  mounted() {
    const clock = setInterval(() => {
      this.date = this.getToday().date
      this.time = this.getToday().time
      this.week = this.getToday().week
    }, 1000)
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once('hook:beforeDestroy', () => {
      clearInterval(clock)
    })
  },
  methods: {
    async refreshRoute() {
      this.$baseEventBus.$emit('reload-router-view')
      this.pulse = true
      setTimeout(() => {
        this.pulse = false
      }, 1000)
    },
    getToday() {
      const dates = new Date()
      const on1 = '/'
      const on2 = ':'
      const wk = dates.getDay() //
      const onY = dates.getFullYear() // 年
      let onM = dates.getMonth() + 1 // 月
      let onD = dates.getDate() // 日
      let onS = dates.getHours() // 时
      let onF = dates.getMinutes() // 分
      let onN = dates.getSeconds() // 秒
      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

      if (onM >= 1 && onM <= 9) {
        // 月
        onM = '0' + onM
      }
      if (onD >= 1 && onD <= 9) {
        // 日
        onD = '0' + onD
      }
      if (onS >= 0 && onS <= 9) {
        // 时
        onS = '0' + onS
      }
      if (onF >= 0 && onF <= 9) {
        // 分
        onF = '0' + onF
      }
      if (onN >= 0 && onN <= 9) {
        // 秒
        onN = '0' + onN
      }

      return {
        week: weeks[wk],
        date: onY + on1 + onM + on1 + onD,
        time: onS + on2 + onF + on2 + onN
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar-container {
  position: relative;
  height: $base-nav-bar-height;
  padding-right: $base-padding;
  padding-left: calc($base-padding + 8px);
  overflow: hidden;
  user-select: none;
  background: $base-menu-background;
  z-index: calc($base-z-index + 1);
  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.05);
  //border-bottom: 1px solid $base-border-color;
  .right-panel {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    height: $base-nav-bar-height;
    color: $base-title-color;
    .week {
      margin-right: 10px;
    }
    ::v-deep {
      svg {
        width: 1em;
        height: 1em;
        margin-right: 15px;
        font-size: $base-font-size-small;
        color: $base-title-color;
        cursor: pointer;
        fill: $base-title-color;
      }

      button {
        svg {
          margin-right: 0;
          color: $base-title-color;
          cursor: pointer;
          fill: $base-title-color;
        }
      }

      .el-badge {
        margin-right: 15px;
      }
    }
  }
}
.student {
  background: none;
  box-shadow: none;
}
</style>
